<template>
    <div class="filter">
        <div class="filter-item">
            <label for="">所属单位：</label>
            <el-select
                v-model="searchForm.depId"
                class="m-2"
                placeholder="请选择所属单位"
                style="width: 145px"
                :disabled="localTypeUnit != '1'"
            >
                <el-option
                    v-for="item in depIdList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>
        <div class="filter-item">
            <label for="">统计时间：</label>
            <el-date-picker
                style="width: 260px"
                v-model="searchForm.dateTime"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :size="'default'"
            />
        </div>
        <div class="filter-item">
            <el-button
                size="default"
                type="primary"
                @click="search"
            >查询</el-button>
            <el-button
                size="default"
                type="primary"
                @click="reset"
            >重置</el-button>
        </div>
    </div>

    <div class="filter">
        <div class="filter-item">
            <label for="">计划名称：</label>
            <el-select
                v-model="tableIndex"
                placeholder="请选择计划名称"
                class="m-2"
                style="width: 145px"
            >
                <el-option
                    v-for="item in tableData"
                    :key="item.planIndex"
                    :label="item.planName"
                    :value="item.planIndex"
                />
            </el-select>
        </div>
    </div>
    <!-- <el-table :data="currentTableData" style="width: 100%" height="360">
        <el-table-column prop="inspDate" label="巡检日期" align="center" />
        <el-table-column prop="workClassName" label="班次" align="center" />
        <el-table-column prop="inspUser" label="人员班组" align="center" />
        <el-table-column label="巡检设备" align="center">
            <el-table-column
                label="设备1"
                align="center"
                :key="item"
                v-for="item in 3"
            >
                <el-table-column prop="state" label="全部" align="center" />
                <el-table-column prop="city" label="已检" align="center" />
                <el-table-column prop="address" label="未检" align="center" />
            </el-table-column>
        </el-table-column>
        <el-table-column prop="date" label="巡检记录" align="center" />
    </el-table> -->

</template>

<script setup>
import schedulingHttp from "@/https/scheduling.js";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import moment from "moment";
import { onMounted, reactive, ref } from "vue";
let searchForm = reactive({
    depId: "",
    dateTime: ["2024-07-28", "2024-07-30"],
    pageNo: 1,
    pageSize: 10,
});
const depIdList = ref([
    { label: "全部", value: "" },
    { label: "公司", value: "1" },
    { label: "星沙厂", value: "2" },
    { label: "城西厂", value: "3" },
    { label: "城北厂", value: "4" },
    { label: "城南厂", value: "5" },
    { label: "城东厂", value: "6" },
]);
const localTypeUnit = ref(Storage.localGet("depId"));
// searchForm.depId = localTypeUnit.value;
const tableIndex = ref();
const tableData = ref([]);
const currentTableData = ref([]);
const search = async () => {
    let params = {
        ...searchForm,
        startTime: searchForm.dateTime
            ? moment(searchForm.dateTime[0]).format("YYYY-MM-DD")
            : "",
        endTime: searchForm.dateTime
            ? moment(searchForm.dateTime[1]).format("YYYY-MM-DD")
            : "",
    };
    const res = await schedulingHttp.inspTaskStatistics(params);
    console.log(res);
    if (res.data.code == 200) {
        res.data.data.forEach((item, index) => {
            item.planIndex = index + "";
        });
        tableData.value = res.data.data;
        tableIndex.value = "0";
        // currentTableData.value = res.data.data[0].statisticsDetailList;
    }
};
const reset = () => { };
const handleClick = () => { };
onMounted(() => {
    search();
});
</script>

<style scoped lang="less">
.filter {
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    .filter-item {
        margin: 0 15px 15px 0px;
        display: flex;
        flex-direction: row;
        align-items: center;
        label {
            font-size: 14px;
            color: #333;
            display: inline-block;
            white-space: nowrap;
        }
    }
}
#table {
    border-collapse: collapse;
    border: 1px solid gray;
    width: 100%;
    font-size: 0.28rem;
    th {
        line-height: 1.5;
        font-size: 14px;
        border-bottom: 1px solid gray;
        border-right: 1px solid gray;
    }
    tr {
        width: 100%;
        line-height: 1.5;
        font-size: 14px;
        border-bottom: 1px solid gray;
        border-right: 1px solid gray;
        td {
            text-align: center;
            line-height: 1.5;
            font-size: 14px;
            border-bottom: 1px solid gray;
            border-right: 1px solid gray;
        }
    }
}
</style>